<template>
  <div class="app-container">
    <div style="width: 400px;height: 300px">
      <el-steps :active="active" finish-status="success" :space="300" style="text-align: center">
        <el-step title="选择文档"></el-step>
        <el-step title="编辑文档信息"></el-step>
        <el-step title="上传文档"></el-step>
      </el-steps>
    </div>
    <div v-if="active==0">
      <div style="padding: 50px">
        <h1>选取文件</h1>
        <el-upload
            class="upload-demo"
            ref="upload"
            action="https://jsonplaceholder.typicode.com/posts/"
            accept=".xlsx,.xls,ppt"
            :limit="1"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        </el-upload>
      </div>
      <el-button style="margin-top: 12px;margin-left: 20%" type="primary" @click="next">下一步</el-button>
    </div>

    <div v-if="active==1">
      <h1>文档信息</h1>

      <div class="form">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="文档分类" prop="category">
            <el-select v-model="ruleForm.category" placeholder="请选择文档类别" style="float: left">
              <el-option label="新闻" value="1"></el-option>
              <el-option label="通告" value="2"></el-option>
              <el-option label="重要信息" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="文档标题" prop="name">
            <el-input v-model="ruleForm.name" style="width: 220px;float: left"></el-input>
          </el-form-item>
          <el-form-item label="作者" prop="author">
            <el-input v-model="ruleForm.author" style="width: 220px;float: left"></el-input>
          </el-form-item>
          <el-form-item label="设为首页新闻" prop="news" style="text-align: left;padding-left: 120px">
            <el-checkbox label="" name="news" v-model="ruleForm.news"></el-checkbox>
          </el-form-item>
          <div class="img" v-if="ruleForm.news==true">
            <el-upload
                class="upload-demo"
                drag
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </div>
          <el-form-item style="padding:0px 80px 10px 0px;">
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>

        </el-form>
      </div>

      <el-button style="margin-top:12px;" type="primary" @click="prev">上一步</el-button>
      <el-button style="margin-top: 12px;" type="primary" @click="next">下一步</el-button>
    </div>

    <div v-if="active==2">
      <h1>上传文档</h1>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
      <div slot="tip" class="el-upload__tip">只能上传xlsx/xls文件，且不超过500kb</div>
      <!--      <el-button style="margin-top:12px;" type="primary" @click="">完成</el-button>-->
    </div>

  </div>
</template>


<script>
export default {
  name: 'ChooseLocalFile',
  data() {
    return {
      fileList: [],//图片上传
      active: 0,//步骤条初始化
      ruleForm: {
        category: "1",
        notice: "",
        news: false,
        name: "",
        author: "",
      },
      rules: {
        name: [
          {required: true, message: '请输入文档名称', trigger: 'blur'},
          {min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur'}
        ],
        author: [
          {required: true, message: '请输入作者名称', trigger: 'blur'},
          {min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur'}
        ],
      },


    };
  },

  methods: {
    //下一页
    next() {
      if (this.active++ > 3) this.active = 0;
    },
    //上一页
    prev() {
      if (this.active > 0) this.active--;
    },
    // 文件上传
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },

    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    //弹出层
    addTemplate() {
      this.dialogVisible = true//弹出层
    }

  }
}
</script>
